<template>
  <div class="detail-page">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else class="detail-box">
      <div v-if="Object.keys(currentData).length > 0">
        <h3 v-html="currentData.title" :title="currentData.title"></h3>
        <p class="tip">
          <span class="date">{{ currentData.pubdate }}</span>
          <span v-if="currentData.source!==''">来源：{{ currentData.source || "暂无" }}</span>
          <span v-if="currentData.types!==''">类别：{{ currentData.types }}</span>
        </p>
        <template>
          <p v-html="currentData.text" id="article" class="article"></p>
        </template>
        <div class="base-info">
          <p class="keywords">
            <i v-if="currentData['keywords']&&currentData['keywords'].length>0">关键词：</i><span v-for="(item, index) in currentData['keywords']" :key="index">{{item}}</span>
          </p>
          <p v-if="currentData.url!==''" class="unique-url">
            原文网址：<a :href="currentData.url" target="_blank">{{
              currentData.url
            }}</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      id: "",
      currentData: {},
    };
  },
  methods: {
    init() {
      this.loading = true;
      this.$get(this.$Url.policy.detail, {
        id: this.id,
      }).then((res) => {
        let data = res.data
        if (data.pubdate && data.pubdate !== '') {
          data.pubdate = moment(data.pubdate).format('YYYY-MM-DD HH:mm')
        }
        this.currentData = data
        this.currentData.text = this.currentData.text.replace(new RegExp('<img','g'),'<img style="max-width:100%;height:auto"')
        this.loading = false;
        this.$nextTick(() => {
          $('#article').find('img').each(v => {
            let obj = $('#article').find('img')[v]
            if ($(obj).attr('data-echo') && $(obj).attr('data-echo') !== '') {
              $(obj).attr('src', $(obj).attr('data-echo') )
            }
          })
        })
      });
    },
  },
  mounted() {
    this.id = this.$route.query.id ? this.$route.query.id : "";
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.detail-page {
  position: relative;
  width: 100%;
  padding: .2rem;
  box-sizing: border-box;
  .detail-box {
    position: relative;
    padding: .5rem;
    margin: 0 .5rem .2rem;
    box-sizing: border-box;
    background: #fff;
    h3 {
      width: 100%;
      line-height: 1.5;
      margin-bottom: .3rem;
      text-align: center;
      font-weight: bold;
      font-size: .24rem;
    }
    .tip {
      margin-bottom: .3rem;
      text-align: center;
      font-size: .14rem;
      color: #999;
      span {
        display: inline-block;
        margin: 0 .1rem;
      }
    }
    .article {
      line-height: 2;
      font-size: 16px;
    }
  }
}
.base-info {
  font-size: .12rem;
  padding: .2rem 0;
  .keywords {
    font-weight: 700;
    margin-bottom: .2rem;
    i {
      display: inline-block;
      vertical-align: middle;
    }
    span {
      display: inline-block;
      padding: .06rem;
      border: 1px solid $color99;
      margin-right: .12rem;
      // margin-bottom: .16rem;
      font-size: .14rem;
      font-weight: normal;
      vertical-align: middle;
      color: #6075e0;
      // cursor: pointer;
    }
  }
  .unique-url {
    font-weight: 700;
    a {
      font-size: 400;
    }
  }
}
.loading {
  position: relative;
  font-size: .14rem;
  text-align: center;
}
</style>